<template>
  <div id="train">
    <div class="header" style='margin-top: -6vh;position: relative;height: 560px;'>
      <img src="../../assets/ui/img/index_top.png" alt="" />
    </div>
    <div class="wrap" style='margin-top: -14vh;position: relative;'>
      <h3 style='text-align: left;'>培训相关</h3>
      <div class="wrap_list">
        <div class="items" v-for="item in list" :key="item.label">
          <img :src="item.icon" alt="" />
          <div class="item-label">{{ item.label }}</div>
          <div class="item-desc" @click="doDis(item)" :class="[item.label == '报销说明' ? '_primary' : '_error']">
            <van-tag type="primary" v-if="item.status !== 0" size="large" color="rgba(32, 158, 228, 0.10)"
              text-color="#209EE4">
              <!-- 去查看 -->
              {{ item.finshsL }}
            </van-tag>
            <van-tag v-else type="primary" size="large" color="rgba(255, 66, 66, 0.10)" text-color="#FF4242">
              <!-- 去填写 -->
              {{ item.desc }}
            </van-tag>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getUiImageUrl } from '../../assets/js/common';
import { useRouter } from 'vue-router';

import { onMounted } from 'vue';
import apis from '../../api/index';
const { userIndexStatus } = apis;
import { useStore } from '../../store';
const store = useStore();
import { localUserinfo } from '../../assets/js/common';
import { showToast } from 'vant';
const userInfo = localUserinfo();
const clickStatus = ref({});
const router = useRouter();
interface listItem {
  icon: string;
  label: string;
  desc: string;
  url: string;
  finshsL: string;
  status: string;
}
const list = ref<listItem[]>([
  {
    icon: getUiImageUrl('icon_train.png'),
    label: '培训协议',
    desc: '去签署',
    finshsL: '去查看',
    url: '/train/agreement',
    status: "0",
  },

  {
    icon: getUiImageUrl('icon_diet.png'),
    label: '饮食调查',
    desc: '去填写',
    finshsL: '去查看',
    url: '/train/meals',
    status: "0",
  },
  {
    icon: getUiImageUrl('icon_reim.png'),
    label: '报销说明',
    desc: '去查看',
    finshsL: '去查看',
    url: '/train/expenseIntro',
    status: "-1",
  },
]);
const getUserInfo = async () => {
  if (userInfo != null) {
    try {
      const response: any = await userIndexStatus({ userId: userInfo.userId });
 
      if (response.code != '10000') {
        showToast(response.msg);
        return
      }
      clickStatus.value = response.data;
      //if (!localStorage.getItem("clickStatus")) {
      localStorage.setItem("clickStatus", JSON.stringify(clickStatus.value));
      //}
      
      store.$state.clickStatus = clickStatus.value;
      list.value[0].status = clickStatus.value.trainingStatus;

      list.value[1].status = clickStatus.value.notEat != null || clickStatus.value.taste != null ? 1 : 0;
      //登录后重新回到首页，然后根据缓存和用户的状态来判定要不要跳到指定页面
      //if (loginUrl && clickStatus.value.trainingStatus == 1) {
      //router.push('/SureJoin')
      //} else if (loginUrl && clickStatus.value.volunteerStatus == 1) {
      //router.push('/VolChoice')
      //}

    } catch (error) {
      console.error('Error fetching user info:', error);
    }
  } else {
    console.log('userInfo.userId is null');
  }
};
onMounted(() => {
  // 监听窗口大小变化，更新 swipeWidth
  getUserInfo();
})
const getFile = () => {
  return new URL(`/src/assets/expIntro.pdf`, import.meta.url).href;
}
const doDis = (item: listItem) => {
  console.log(item)
  if (item.label == '报销说明') {
    // 获取当前路由
    const url = getFile();
    window.open(url, "_blank")
  } else if (item.label == '饮食调查') {
    router.push({
      path: item.url,
      query: {
        pathUrl: 1,
      },
    });
  } else if (item.label == '培训协议') {
    //router.push(item.url);
    if (clickStatus.value.trainingUrl != null) {
      //如果有就直接加载图片预览
      router.push("/train/imgprivew");
    } else {
      router.push(item.url);
    }
  }

};
</script>

<style lang="less" scoped>
img {
  width: 100%;
}

:deep(#layout) {
  background: #fff;
  padding: 0;
  box-shadow: 0px 0 0 rgba(255, 255, 255, 1);
}

#train {
  // width: 100vw;
  // height: 100vh;
  // overflow: auto;
  padding-top: 50px;

  .wrap {
    margin-top: 100px;
    width: 100%;
    height: 400px;
    border-radius: 30px 30px 0px 0px;
    opacity: 1;
    background: #ffffff;
    //box-shadow: 0px 32px 188px 0px rgba(50, 50, 71, 0.24);
    //padding-top: 70px;
    box-sizing: border-box;
    padding-top: 20px;

    h3 {
      margin: 10px 20px 0px 0px;
      padding-left: 30px;
    }

    .wrap_list {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .items {
      width: 319px;
      height: 84px;
      border-radius: 14px;
      opacity: 1;
      background: #ffffff;
      box-shadow: 0px 2px 18px 0px rgba(50, 50, 71, 0.24);
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 50px;
      }

      .item-label {
        margin: 0 15px;
        font-size: 16px;
      }

      .item-desc {
        margin-left: 70px;
        font-size: 12px;
      }
    }
  }
}
</style>
